<template>
  <div>
    <div class="between" style="margin-buttom：30px">
      <!-- //部门分列 -->
      <div class="flex">
        <div class="text"><span class="col" /><span style="font-size:13px;color:#555;padding-top:1px">已离职</span></div>
        <div class="text"><span class="col" style="background-color:#a8f8bb" /><span style="font-size:13px;color:#555;padding-top:1px">再入职</span></div>
        <div class="text"><span class="col" style="background-color:#fedbd7" /><span style="font-size:13px;color:#555;padding-top:1px">公司合计</span></div>
        <div class="text"><span class="col" style="background-color:#ffe8c9" /><span style="font-size:13px;color:#555;padding-top:1px">一级部门</span></div>
        <div class="text"><span class="col" style="background-color:#fdfcd5" /><span style="font-size:13px;color:#555;padding-top:1px">二级部门</span></div>
      </div>
      <!-- 、按钮 -->
      <div style="padding: 0px 20px 0 0;">
        <el-button type="primary" size="mini" @click="exportEmployees">导出</el-button>
      </div>
    </div>
    <!-- //列表 -->
    <el-table
      :data="Datareport"
      border
      :height="height"
      style="width: 100%;text-align: center"
      :header-cell-style="{backgroundColor:'#fafafa',textAlign: 'center'}"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="username"
        label="姓名"
        width="150"
      />
      <el-table-column
        width="150"
        label="入职时间"
      >
        <template #default="{row}">
          {{ row.timeOfEntry=row.timeOfEntry.split('T')[0] }}
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        prop="mobile"
        label="手机号"
      />
      <el-table-column
        width="150"
        prop="idNumber"
        label="身份证号码"
      />
      <el-table-column
        width="150"
        prop="theHighestDegreeOfEducation"
        label="学历"
      />
      <el-table-column
        width="150"
        prop="openingBank"
        label="开户行"
      />
      <el-table-column
        width="150"
        prop="firstLevelDepartment"
        label="一级部门"
      />
      <el-table-column
        width="150"
        prop="twoLevelDepartment"
        label="二级部门"
      />
      <el-table-column
        width="150"
        prop="workingCity"
        label="工作城市"
      />
      <el-table-column
        width="150"
        prop="socialSecurityComputerNumber"
        label="社保电脑号"
      />
      <el-table-column
        width="150"
        prop="providentFundAccount"
        label="公积金账号"
      />
      <el-table-column
        width="150"
        prop="leaveDate"
        label="离职时间"
      />
      <el-table-column
        width="150"
        prop="householdRegistrationType"
        label="户籍类型"
      />
      <el-table-column
        width="150"
        prop="participatingInTheCity"
        label="参保城市"
      />
      <el-table-column
        width="150"
        prop="socialSecurityMonth"
        label="社保月份"
      />
      <el-table-column
        width="150"
        prop="socialSecurityBase"
        label="社保基数"
      />
      <el-table-column
        width="150"
        prop="socialSecurity"
        label="社保合计"
      />
      <el-table-column
        width="150"
        prop="socialSecurityEnterprise"
        label="社保企业"
      />
      <el-table-column
        width="150"
        prop="socialSecurityIndividual"
        label="社保个人"
      />
      <el-table-column
        width="150"
        prop="providentFundCity"
        label="公积金城市"
      />
      <el-table-column
        width="150"
        prop="providentFundMonth"
        label="公积金月份"
      />
      <el-table-column
        width="150"
        prop="providentFundBase"
        label="公积金基数"
      />
      <el-table-column
        width="150"
        prop="accumulationFundEnterpriseBase"
        label="公积金企业基数"
      />
      <el-table-column
        width="150"
        prop="proportionOfProvidentFundEnterprises"
        label="公积金企业比例"
      />
      <el-table-column
        width="150"
        prop="individualBaseOfProvidentFund"
        label="公积金个人基数"
      />
      <el-table-column
        width="150"
        prop="personalRatioOfProvidentFund"
        label="公积金个人比例"
      />
      <el-table-column
        width="150"
        prop="totalProvidentFund"
        label="公积金合计"
      />
      <el-table-column
        width="150"
        prop="providentFundEnterprises"
        label="公积金企业"
      />
      <el-table-column
        width="150"
        prop="providentFundIndividual"
        label="公积金个人"
      />
      <el-table-column
        width="150"
        prop="pensionEnterpriseBase"
        label="养老企业基数"
      />
      <el-table-column
        width="150"
        prop="proportionOfPensionEnterprises"
        label="养老企业比例"
      />
      <el-table-column
        width="150"
        prop="pensionEnterprise"
        label="养老企业"
      />
      <el-table-column
        width="150"
        prop="personalPensionBase"
        label="养老个人基数"
      />
      <el-table-column
        width="150"
        prop="personalPensionRatio"
        label="养老个人比例"
      />
      <el-table-column
        width="150"
        prop="oldAgeIndividual"
        label="养老个人"
      />
      <el-table-column
        width="150"
        prop="unemploymentEnterpriseBase"
        label="失业企业基数"
      />
      <el-table-column
        width="150"
        prop="proportionOfUnemployedEnterprises"
        label="失业企业比例"
      />
      <el-table-column
        width="150"
        prop="unemployedEnterprise"
        label="失业企业"
      />
      <el-table-column
        width="150"
        prop="theNumberOfUnemployedIndividuals"
        label="失业个人基数"
      />
      <el-table-column
        width="150"
        prop="percentageOfUnemployedIndividuals"
        label="失业个人比例"
      />
      <el-table-column
        width="150"
        prop="unemployedIndividual"
        label="失业个人"
      />
      <el-table-column
        width="150"
        prop="medicalEnterpriseBase"
        label="医疗企业基数"
      />
      <el-table-column
        width="150"
        prop="proportionOfMedicalEnterprises"
        label="医疗企业比例"
      />
      <el-table-column
        width="150"
        prop="medicalEnterprise"
        label="医疗企业"
      />
      <el-table-column
        width="150"
        prop="medicalPersonalBase"
        label="医疗个人基数"
      />
      <el-table-column
        width="150"
        prop="medicalPersonalRatio"
        label="医疗个人比例"
      />
      <el-table-column
        width="150"
        prop="medicalIndividual"
        label="医疗个人"
      />
      <el-table-column
        width="150"
        prop="baseOfIndustrialInjuryEnterprises"
        label="工伤企业基数"
      />
      <el-table-column
        width="150"
        prop="proportionOfIndustrialInjuryEnterprises"
        label="工伤企业比例"
      />
      <el-table-column
        width="150"
        prop="industrialInjuryEnterprise"
        label="工伤企业"
      />
      <el-table-column
        width="150"
        prop="fertilityEnterpriseBase"
        label="生育企业基数"
      />
      <el-table-column
        width="150"
        prop="proportionOfFertilityEnterprises"
        label="生育企业比例"
      />
      <el-table-column
        width="150"
        prop="childbearingEnterprise"
        label="生育企业"
      />
      <el-table-column
        width="150"
        prop="baseOfSeriousIllness"
        label="大病企业基数"
      />
      <el-table-column
        width="150"
        prop="bigDiseaseEnterprise"
        label="大病企业比例"
      />
      <el-table-column
        width="150"
        prop="bigDiseaseEnterprise"
        label="大病企业"
      />
      <el-table-column
        width="150"
        prop="personalBaseOfSeriousIllness"
        label="大病个人基数"
      />
      <el-table-column
        width="150"
        prop="personalProportionOfSeriousIllness"
        label="大病个人比例"
      />
      <el-table-column
        width="150"
        prop="address"
        label="大病个人"
      ><template #default="{row}">
        {{ row.personalBaseOfSeriousIllness*row.personalProportionOfSeriousIllness }}
      </template>

      </el-table-column>
      <el-table-column
        width="150"
        prop="providentFundNotes"
        label="公积金备注"
      />
      <el-table-column
        width="150"
        prop="socialSecurityNotes"
        label="社保备注"
      /></el-table>
  </div>
</template>

<script>
export default {
  props: {
    Datareport: {
      type: Array
    },
    height: {
      type: String
    }
  },
  methods: {
    // 导出
    async exportEmployees() {
      // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      // console.log(export_json_to_excel)
      const dict = {
        用户ID: 'userId',
        姓名: 'username',
        工作城市: 'workingCity',
        入职时间: 'timeOfEntry',
        公积金企业基数: 'accumulationFundEnterpriseBase',
        大病个人: 'apersonOfGreatDisease',
        归档id: 'archiveId',
        银行卡号: 'bankCard',
        工伤企业基数: 'baseOfIndustrialInjuryEnterprises',
        大病企业基数: 'baseOfSeriousIllness',
        大病企业: 'bigDiseaseEnterprise',
        生育企业: 'childbearingEnterprise',
        生育企业基数: 'fertilityEnterpriseBase',
        一级部门: 'firstLevelDepartment',
        户籍类型: 'householdRegistrationType',
        id: 'id',
        身份证号: 'idNumber',
        公积金个人基数: 'individualBaseOfProvidentFund',
        工伤企业: 'industrialInjuryEnterprise',
        离职时间: 'leaveDate',
        医疗企业: 'medicalEnterprise',
        医疗企业基数: 'medicalEnterpriseBase',
        医疗个人: 'medicalIndividual',
        医疗个人基数: 'medicalPersonalBase',
        医疗个人比例: 'medicalPersonalRatio',
        手机号: 'mobile',
        养老个人: 'oldAgeIndividual',
        开户行: 'openingBank',
        参保城市: 'participatingInTheCity',
        养老企业: 'pensionEnterprise',
        养老企业基数: 'pensionEnterpriseBase',
        失业个人比例: 'percentageOfUnemployedIndividuals',
        大病个人基数: 'personalBaseOfSeriousIllness',
        养老个人基数: 'personalPensionBase',
        养老个人比例: 'personalPensionRatio',
        大病个人比例: 'personalProportionOfSeriousIllness',
        公积金个人比例: 'personalRatioOfProvidentFund',
        生育企业比例: 'proportionOfFertilityEnterprises',
        工伤企业比例: 'proportionOfIndustrialInjuryEnterprises',
        医疗企业比例: 'proportionOfMedicalEnterprises',
        养老企业比例: 'proportionOfPensionEnterprises',
        公积金企业比例: 'proportionOfProvidentFundEnterprises',
        企业id: 'proportionOfSeriouslyIllEnterprises',
        失业企业比例: 'proportionOfUnemployedEnterprises',
        公积金账号: 'providentFundAccount',
        公积金基数: 'providentFundBase',
        公积金城市: 'providentFundCity',
        公积金企业: 'providentFundEnterprises',
        公积金个人: 'providentFundIndividual',
        公积金月份: 'providentFundMonth',
        公积金备注: 'providentFundNotes',
        社保合计: 'socialSecurity',
        社保基数: 'socialSecurityBase',
        社保电脑号: 'socialSecurityComputer',
        社保企业: 'socialSecurityEnterprise',
        社保个人: 'socialSecurityIndividual',
        社保月份: 'socialSecurityMonth',
        社保备注: 'socialSecurityNotes',
        学历: 'theHighestDegreeOfEducation',
        失业个人基数: 'theNumberOfUnemployedIndividuals',
        公积金合计: 'totalProvidentFund',
        二级部门: 'twoLevelDepartment',
        失业企业: 'unemployedEnterprise',
        失业个人: 'unemployedIndividual',
        失业企业基数: 'unemploymentEnterpriseBase'
      }
      const userData = this.Datareport.map(user => {
        return this.object2Arrayy(user, dict)
      })

      console.log(userData)

      export_json_to_excel({
        header: Object.keys(dict),
        data: userData
      })
    },
    object2Arrayy(user, dict) {
      const newUser = []
      for (const key in dict) {
        const enKey = dict[key]
        const value = user[enKey]
        newUser.push(value)
      }
      return newUser
    }
  }
}
</script>

<style lang="scss" scoped>
.col{
  // display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  background-color: #cfeffe;
}
.text{
display: flex;
width: 100px;
height: 15px;
justify-content: center;
align-items: center;
}
.flex{
  display: flex;
  // padding-top: 10px;
}
.between{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
